<template>
	<div class="top"><input type="text" placeholder="请输入搜索内容" /></div>
	<div class="center">
		<p class="text" @click="cutCourse" :class="{centerStyle:isCourse}">已购课程</p>
		<p class="text" @click="cutRecord" :class="{centerStyle:!isCourse}">观看记录</p>
	</div>
	<div class="botton">
		<div class="course" v-if="isCourse">
			<div class="course">
				<div class="courseIn" v-for="item in course">
					<div class="courseInLeft">
						<image src="/static/logo.png" mode=""></image>
					</div>
					<div class="courseInRight">
						<p class="nameAndPrice"><span class="name">{{item.courseName}}</span><span class="price"></span>
						</p>
						<div class="emphasis">
							<span class="emp" v-for="emp in item.emphasis">{{emp}}</span>
						</div>
						<div class="TeacherAndBtn">
							<image :src="item.teacherImg"></image>
							<div class="Teacher">
								<p class="Teacher">{{item.courseTeacher}}</p>
								<button @click="toOverview">立即学习</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="record course" v-else>
			<div class="course">
				<div class="courseIn" v-for="item in course">
					<div class="courseInLeft">
						<image src="/static/logo.png" mode=""></image>
					</div>
					<div class="courseInRight">
						<p class="nameAndPrice"><span class="name">{{item.courseName}}</span><span class="price"
								style="font-size: 12px;">已观看至课程{{item.record}}</span></p>
						<div class="emphasis">
							<span class="emp" v-for="emp in item.emphasis">{{emp}}</span>
						</div>
						<div class="TeacherAndBtn">
							<image :src="item.teacherImg"></image>
							<div class="Teacher">
								<p class="Teacher">{{item.courseTeacher}}</p>
								<button @click="toOverview">立即学习</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	function toOverview() {
		uni.navigateTo({
			url: '/pages/Course/CourseOverview'
		});
	}
	const isCourse = ref(true)

	function cutCourse() {
		isCourse.value = true
	}

	function cutRecord() {
		isCourse.value = false
	}
	let course = ref([{
			id: 1,
			courseImg: '/static/logo.png',
			courseName: '课程1',
			price: '免费1',
			emphasis: ['课程方法1', '课程方法2', '课程方法3'],
			courseTeacher: '课程老师1',
			teacherImg: '/static/logo.png',
			record: 1
		},
		{
			id: 2,
			courseImg: '/static/logo.png',
			courseName: '课程2',
			price: '免费2',
			emphasis: ['课程方法1', '课程方法2', '课程方法3'],
			courseTeacher: '课程老师2',
			teacherImg: '/static/logo.png',
			record: 1
		},
		{
			id: 3,
			courseImg: '/static/logo.png',
			courseName: '课程3',
			price: '￥200',
			emphasis: ['课程方法1', '课程方法2', '课程方法3'],
			courseTeacher: '课程老师3',
			teacherImg: '/static/logo.png',
			record: 1
		},
		{
			id: 4,
			courseImg: '/static/logo.png',
			courseName: '课程4',
			price: '限时免费',
			emphasis: ['课程方法1', '课程方法2', '课程方法3'],
			courseTeacher: '课程老师4',
			teacherImg: '/static/logo.png',
			record: 2
		},
		{
			id: 5,
			courseImg: '/static/logo.png',
			courseName: '课程5',
			price: '￥260',
			emphasis: ['课程方法1', '课程方法2', '课程方法3'],
			courseTeacher: '课程老师5',
			teacherImg: '/static/logo.png',
			record: 5
		},
		{
			id: 6,
			courseImg: '/static/logo.png',
			courseName: '课程6',
			price: '￥300',
			emphasis: ['课程方法1', '课程方法2', '课程方法3'],
			courseTeacher: '课程老师6',
			teacherImg: '/static/logo.png',
			record: 4
		}
	])
</script>

<style scoped>
	.top {
		display: grid;
		width: 100%;
		height: 8vh;
		place-items: center;
	}

	input[type=text] {
		width: 90%;
		height: 35px;
		border: 1px solid black;
		text-align: center;
		border-radius: 5px;
	}

	.center {
		display: flex;
		place-items: center;
		width: 100%;
		height: 6vh;
	}

	.text {
		margin-left: 30px;
		height: 30px;
		text-align: center;
		font-size: 20px;
		border-bottom: 2px solid black;
	}

	.centerStyle {
		color: #ff5e8b;
		border-bottom: 2px solid #ff5e8b;
	}

	.botton {
		width: 90%;
		height: 83vh;
	}

	.course {
		width: 110%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.courseIn {
		margin-top: 10px;
		display: flex;
		width: 90%;
		height: 140px;
		border: 2px solid #707070;
		border-radius: 10px;
	}

	.courseIn image {
		margin-top: 20px;
		margin-left: 20px;
		width: 80px;
		height: 100px;
	}

	.courseInLeft {
		width: 35%;
		height: 100%;
	}

	.courseInRight {
		width: 65%;
		height: 100%;
		padding-top: 15px;
	}

	.nameAndPrice {
		width: 100%;
		display: flex;
		justify-content: space-between;

	}

	.name {
		font-size: 24px;
	}

	.price {
		margin-right: 30px;
		color: red;
	}

	.emphasis {
		margin-top: 5px;
	}

	.emp {
		border: 1px solid #707070;
		font-size: 10px;
		margin-right: 10px;
		border-radius: 3px;
	}

	.TeacherAndBtn {
		display: flex;
	}

	.TeacherAndBtn image {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-left: -4px;
	}

	.Teacher {
		width: 100%;
		margin-top: 12px;
		margin-left: 5px;
		display: flex;
	}

	.Teacher button {
		width: 200px;
		height: 45px;
		background-color: red;
		border-radius: 20px;
		text-align: center;
		padding-left: 20px;
		padding-right: 20px;
		margin-right: 10px;
		color: white;
	}
</style>